<!DOCTYPE html>
<html lang="zh-CN">
  <head>
     <meta charset="utf-8"> 
  <title>查看个人信息</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

 <style type="text/css">
    header{
      height: 65px;
      background: rgba(247,235,175,1);
    }
    header span{
      line-height: 65px;
      font-size:22px;
      font-weight: bolder;
      float: left;
      margin-left: 50px;
    }
    header #login{
      display: inline-block;
      float: right;
      margin-right: 150px;
      margin-top: 15px;
    }
    body {
      height: 670px;
    background: url(image/19.jpg) no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  input,select, textarea,.input-group{
    height: 25px;
      border: 0;
      border-radius: 3px;
      margin-bottom: 15px;
  }
  .viewpersoninformation{
    margin-left: 400px;
    margin-top: 50px;
    width: 600px;
    height: 350px;
  }
  .data-common{
    display: inline-block;
    width: 400px;
    margin-top: 20px;
  }
  .common-span{
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .common-input{
    width: 200px;
    display: inline-block;
  }
  .sideBar{
    width: 200px;
    height: 550px;
    /* display: inline-block; */
    float: left;
    background: rgba(255,255,208,0.8);
    border-right:1px solid rgba(255,255,208,1);
  }
  </style>
  </head>
  <body>

  <header>
    <span align="left">分享式民宿酒店预订系统———查看个人信息</span>

  </header>
<div class="sideBar">
          <div class="row" style="width: 215px;">
            <div class="span2">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="housingList.html">房间预定</a></li>
                <li><a href="reservehistory.html">我的订单</a></li>  
                <li class="active"><a href="#">个人中心</a></li> 
                <li><a href="index.html" id="over">注销登录</a></li>
              </ul>
            </div>
          </div>
  </div>
  <div class="viewpersoninformation">
          <div class="form-group">
              <label for="username" class="col-sm-2 control-label">用户名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="username" placeholder="showname" readonly="readonly"></div>
              </div>
               <div class="form-group">
              <label for="sexy" class="col-sm-2 control-label">性别</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="sexy" placeholder="showsexy" readonly="readonly"></div>
              </div>
              <div class="form-group">
                <label for="idNumber" class="col-sm-2 control-label">身份证号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="idNumber" placeholder="showidNumber" readonly="readonly"></div>
              </div>
              <div class="form-group">
              <label for="city" class="col-sm-2 control-label">城市</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="city" placeholder="showplace" readonly="readonly"></div>
              </div>
              <div class="form-group">
              <label for="place" class="col-sm-2 control-label">所在地</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="place" placeholder="showplace" readonly="readonly"></div>
              </div>

              <div class="form-group">
                <label for="phoneNumber" class="col-sm-2 control-label">手机</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="phoneNumber" placeholder="showphoneNumber" readonly="readonly"></div>
              </div>

              <div class="form-group">
                <label for="idNumber" class="col-sm-2 control-label">个人描述</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="describe" placeholder="兴趣、爱好等" readonly="readonly"></div>
              </div>

            </div>
            <div>              
                <button class="btn btn-info" data-toggle="modal" type="button" id="update">修改信息</button>

              </div>



  <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
  <script type="text/javascript">
      $(document).ready(function(){
          var userId = localStorage.getItem('userId')//获取用户Id
          // console.log(userId)
          if(!userId){
              window.location.href='index.html'
              //无用户id（级无登陆直接近页面不可以，直接去登录）
          }
          var args = {
              userKeyId:userId
          };

          $.get("/user/findOne",args,function (root) {
              $("#username").val(root.data.userName);

              $("#sexy").val(root.data.sex);

              $("#idNumber").val(root.data.idCard);

              $("#city").val(root.data.city);

              $("#place").val(root.data.address);

              $("#phoneNumber").val(root.data.phoneNumber);

              $("#describe").val(root.data.introduce);

          });

          $("#update").click(function () {
              window.location.href = 'updateorderdatails.html'
          })

        // js事件
        // $("p").click(function(){
        // $(this).hide();
    // });
          // 注销事件
          $("#over").click(function(){
              localStorage.setItem('userId', '')
          });
});
  </script>
</html>
